<template>
    <div class="home">
        <!--轮播图-->
        <div class="block">
            <el-carousel height="460px">
                <el-carousel-item v-for="item in carousel" :key="item.carousel_id">
                    <img height="460px" :src="$target+item.imgPath" :alt="item.describes">
                </el-carousel-item>
            </el-carousel>
        </div>
        <!--商品列表区域-->
        <div class="main-box">
            <div class="main">
                <!-- 手机商品展示区域 -->
                <div class="phone">
                    <div class="box-hd">
                        <div class="title">手机</div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <router-link to>
                                <img :src="$target +'public/imgs/phone/phone.png'"/>
                            </router-link>
                        </div>
                        <div class="list">
                            <my-list :listData="phoneList"></my-list>
                        </div>
                    </div>
                </div>
                <!-- 家电商品展示区域 -->
                <div class="appliance" id="promo-menu">
                    <div class="box-hd">
                        <div class="title">家电</div>
                        <div class="more">
                            <div class="myMenu">
                                <ul>
                                    <li :class="applianceActive == 1 ? 'active':''"
                                        @mouseover="applianceMouseOver($event,1)">热门</li>
                                    <li :class="applianceActive == 2 ? 'active':''"
                                        @mouseover="applianceMouseOver($event,2)">电视</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <ul>
                                <li>
                                    <img :src="$target +'public/imgs/appliance/appliance-promo1.png'"/>
                                </li>
                                <li>
                                    <img :src="$target +'public/imgs/appliance/appliance-promo2.png'"/>
                                </li>
                            </ul>
                        </div>
                        <div class="list">
                            <my-list :listData="applianceHotList"></my-list>
                        </div>
                    </div>
                </div>
                <!-- 配件商品展示区域 -->
                <div class="accessory">
                    <div class="box-hd">
                        <div class="title">配件</div>
                        <div class="more">
                            <div class="myMenu">
                                <ul>
                                    <li :class="partsActive == 1 ? 'active':''" @mouseover="partsMouseOver($event,1)">
                                        热门
                                    </li>
                                    <li :class="partsActive == 2 ? 'active':''" @mouseover="partsMouseOver($event,2)">
                                        保护套
                                    </li>
                                    <li :class="partsActive == 3 ? 'active':''" @mouseover="partsMouseOver($event,3)">
                                        充电器
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <ul>
                                <li>
                                    <img :src="$target +'public/imgs/accessory/accessory-promo1.png'" alt/>
                                </li>
                                <li>
                                    <img :src="$target +'public/imgs/accessory/accessory-promo2.png'" alt/>
                                </li>
                            </ul>
                        </div>
                        <div class="list">
                            <my-list :listData="partsHotList"></my-list>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import homeApi from "../api/homeApi"
    export default {
        name: 'Home',
        components: {},
        created(){
            //轮播图数据获取
            this.getCarousel();
            //获取所有首页相关的商品数据
            this.getProduct("phoneList", {"categoryName": "手机"});
            this.getProduct("applianceHotList", {"categoryName": ["电视机", "空调", "洗衣机"]}, true);
            this.getProduct("TVListData", {"categoryName": "电视机"});
            this.getProduct("partsHotList", {"categoryName": ["保护套", "保护膜", "充电器", "充电宝"]}, true);
            this.getProduct("coverListData", {"categoryName": "保护套"});
            this.getProduct("chargerListData", {"categoryName": "充电器"});
        },
        data(){
            return {
                carousel: [],//轮播图数据

                phoneList: [],//手机数据
                applianceList: [],//家电热门数据
                TVListData: [],//电视数据
                partsList: [],//配件热门数据
                coverListData: [],//保护套数据
                chargerListData: [],//充电器数据




                applianceHotList: [],//家电热门数据(渲染用

                partsHotList: [],//配件热门数据(渲染用

                applianceActive: 1,//当前选择的分类表示 //热门家电 1:热门数据 2:电视
                partsActive: 1,//配件分类 1热门  2保护套 3充电器
            }
        },
        methods: {
            //获取轮播图数据
            async getCarousel(){
                let {data: res} = await homeApi.getCarousel();
                this.carousel = res.carousel;
                console.log(this.carousel)
            },
            //获取商品数据
            async getProduct(dataName, data, hotFlag){
                if (hotFlag) {
                    var {data: res} = await homeApi.getHotProduct(data);
                } else {
                    var {data: res} = await homeApi.getPromoProduct(data);
                }
                this[dataName] = res.Product;
            },
            applianceMouseOver(e, val) {//家电 1热门  2电视
                this.applianceActive = val;
            },
            partsMouseOver(e, val) {//配件 1热门  2保护套  3充电器
                this.partsActive = val;
            }
        },
        watch: {
            applianceActive(val){//当applianceActive发生改变的时候 会触发监听属性
                if (!this.applianceList.length) {//如果刚开始applianceList没有内容 则证明没有点击过
                    this.applianceList = this.applianceHotList;
                }
                this.applianceHotList = val === 1 ? this.applianceList : this.TVListData;
            },
            partsActive(val){ //1 --> 2|3
                console.log("监听属性", val); //1partsList  2 coverListData  3chargerListData
                if(!this.partsList.length){//如果原始数据源length=0 第一次切换数据
                    this.partsList = this.partsHotList
                }
                let curData = null;
                switch (val){
                    case 1:
                        curData = this.partsList;
                        break;
                    case 2:
                        curData = this.coverListData;
                        break;
                    case 3:
                        curData = this.chargerListData;
                        break;
                }
                this.partsHotList = curData;
            }
        }
    }
</script>
<style type="text/scss" lang="scss">

    .main-box {
        background-color: #f5f5f5;
        padding-bottom: 20px;
    }

    .main {
        margin: 0 auto;
        max-width: 1225px;
    }

    /* 轮播图CSS */
    .block {
        margin: 0 auto;
        max-width: 1225px;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }

    /* 轮播图CSS END */

    .box-hd {
        height: 58px;
        margin: 20px 0 0 0;
        .title {
            float: left;
            font-size: 22px;
            font-weight: 200;
            line-height: 58px;
            color: #333;
        }
        .more {
            float: right;
            a {
                font-size: 16px;
                line-height: 58px;
                color: #424242;
                &:hover {
                    color: #ff6700;
                }
            }
            .myMenu li {
                float: left;
                margin-left: 30px;
                &.active, &:hover {
                    color: #ff6700;
                    border-bottom: 2px solid #ff6700;
                }
            }
        }
    }

    .box-bd {
        height: 615px;
        .promo-list {
            float: left;
            height: 615px;
            width: 234px;
            li {
                z-index: 1;
                width: 234px;
                height: 300px;
                margin-bottom: 14.5px;
                -webkit-transition: all 0.2s linear;
                transition: all 0.2s linear;
                &:hover {
                    z-index: 2;
                    -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
                    box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
                    -webkit-transform: translate3d(0, -2px, 0);
                    transform: translate3d(0, -2px, 0);
                }
                img {
                    width: 234px;
                    height: 300px;
                }
            }
            img {
                width: 234px;
            }
        }
        .list {
            float: left;
            height: 615px;
            width: 991px;
        }
    }
</style>
